import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Menu, Icon, Tooltip } from 'antd';
const SubMenu = Menu.SubMenu;
import { WeaTableNew } from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import { WeaErrorPage, WeaLeftRightLayout, WeaTop, WeaRightMenu, WeaRadioGroup, WeaReportCard, WeaEchart, WeaNewScroll, WeaSelect, WeaAlertPage, WeaTab } from "ecCom";
import * as cct from '../../constants/CommonConstant';
import * as rct from '../../constants/ReportConstant';
import "./style/index.css";

@inject('contractStaffStore')
@observer
class ContractStaffReport extends React.Component {

    constructor(props) {
        super(props);
    }


    componentWillUpdate() {

    }

    componentDidUpdate() {
  
    }

    componentWillReceiveProps(nextProps){
        
        const flag = this.props.hasOwnProperty("location");
        if(flag){
            const keyOld = this.props.location.key;
            const keyNew = nextProps.location.key;
            if(keyOld!=keyNew){
                const store = this.props.contractStaffStore;
                store.reLoad();
            }
        }
    }

    render() {
        const store = this.props.contractStaffStore;

        let { tableStore, loading } = store;
        const config = [
            rct.year,
            rct.props,
            rct.includeChilds
        ];
        return (
            <WeaRightMenu>
                <WeaTop
                    loading={loading}
                    title={"人员统计"}
                    icon={<i className={cct.icon} />}
                    iconBgcolor={cct.iconBgcolor}
                    showDropIcon={true}
                    dropMenuDatas={[]}
                    buttons={[]}
                    buttonSpace={10}
                >
                    <div className="wea-contract-report">
                        <div className="content">
                            <WeaNewScroll height='100%' toTop={true}>
                                <div className="scroll-content">
                                    <div style={{ paddingTop: "10px" }}>
                                        <WeaRadioGroup config={config} onChange={(params) => { store.doSearch(params) }} />
                                    </div>
                                    <div style={{ paddingTop: "10px" }}>
                                        <WeaTable comsWeaTableStore={tableStore} getColumns={c => this.reRenderColumns(c)}/>
                                    </div>
                                </div>
                            </WeaNewScroll>
                        </div>
                    </div>
                </WeaTop>
            </WeaRightMenu>
        );
    }

   

    reRenderColumns(columns){
        let that = this;
        const store = that.props.contractStaffStore;
        columns.forEach(c=>{
            if(c.dataIndex=='usr4'){
                c.render = function(text, record){
                    let percent=0;
                    if(record.usr3span>0&&record.usr4span==0) percent = 100;
                    else if(record.usr3span==0&&record.usr4span>0) percent = -100;
                    else percent = (record.usr3span-record.usr4span)/record.usr4span*100;
                    percent = percent.toFixed(2);
                    if(percent>0){
                        return <span>{percent}%<div className={"rising-arrow-up"}><Icon type="arrow-up"/></div></span>
                    }else if(percent<0){
                        return <span>{percent}%<div className={"rising-arrow-down"}><Icon type="arrow-down"/></div></span>
                    }else{
                        return <span>{percent}%</span>
                    }
                }
            }else if(c.dataIndex=='usr11'){
                c.render = function(text, record){
                    let percent;
                    if(record.usr10span>0&&record.usr11span==0) percent = 100;
                    else if(record.usr10span==0&&record.usr11span>0) percent = -100;
                    else percent = (record.usr10span-record.usr11span)/record.usr11span*100;
                    percent = percent.toFixed(2);
                    if(percent>0){
                        return <span>{percent}%<div className={"rising-arrow-up"}><Icon type="arrow-up"/></div></span>
                    }else if(percent<0){
                        return <span>{percent}%<div className={"rising-arrow-down"}><Icon type="arrow-down"/></div></span>
                    }else{
                        return <span>{percent}%</span>
                    }
                }
            } else {
                c.render = function(text, record){
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span title={valueSpan} dangerouslySetInnerHTML={{__html: valueSpan}}></span>
                }
            }
        })
        return columns;
    }
}

export default ContractStaffReport;